<template>

  <XForm class="mr-[190px]" ref="form" :formData="data" :fieldList="fieldList" :options="formOption" :rules="rules"></XForm>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
const props = defineProps({
  country: { type: Array, default: () => [] },
  data: { type: Object, default: () => ({}) },
})

const publicStyle = { style: { width: "320px" } }
const form = ref()
const fieldList = ref([
  {
    type: "title",
    label: "客户信息",
  },
  {
    field: "recipient_company",
    label: "公司名称",
    options: {
      data: [],
    },
    ...publicStyle,
  },
  { field: "recipient_name", label: "收件人名", type: "slot", style: { width: "200px" } },
  { field: "recipient_last_name", label: "收件人姓", type: "slot", style: { width: "200px" } },
  { type: "br" },
  { field: "recipient_phone", label: "联系电话", ...publicStyle },
  { field: "recipient_email", label: "邮箱", ...publicStyle },
  { field: "recipient_tax_id", label: "收件人证件/税号", ...publicStyle },
  { type: "br" },
  {
    field: "recipient_country",
    label: "国家/地区",
    type: "select",
    ...publicStyle,
    options: { data: props.country },
  },
  { field: "recipient_province", label: "州/省", style: { width: "240px" } },
  { field: "recipient_city", label: "城市", style: { width: "240px" } },
  { field: "recipient_region", label: "区/县", style: { width: "240px" } },
  { field: "recipient_zip_code", label: "邮编", ...publicStyle },
  { field: "recipient_door_num", label: "门牌号", ...publicStyle },
  { field: "recipient_preferred_address", label: "详细地址", itemStyle: { width: "100%" }, style: { width: "100%" }, full: true },
  { field: "recipient_secondary_address", label: "详细地址2", itemStyle: { width: "100%" }, style: { width: "100%" }, full: true },
])

watch(props, (val) => {
  const { country } = val
  if (country && country.length) {
    const _index = fieldList.value.findIndex((n) => n.field === "recipient_country")
    fieldList.value[_index].options.data = country
  }
})

const rules = reactive({
  recipient_name: [{ required: true, message: "请输入收件人名", trigger: "blur" }],
  recipient_last_name: [{ required: true, message: "请输入收件人姓", trigger: "blur" }],
  recipient_phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  recipient_country: [{ required: true, message: "请选择国家地区", trigger: "blur" }],
  recipient_zip_code: [{ required: true, message: "请输入邮编", trigger: "blur" }],
  recipient_preferred_address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
})

const formOption = ref({ inline: true, labelPosition: "top" })

defineExpose({ form })
</script>

<style lang="scss" scoped></style>
